<template>
    <div>
        <Header 
            :Title="title" 
            :Type='type'
            @beenclicked='Check'></Header>
        <input 
            type="text" 
            placeholder='搜索书名/作者' 
            v-model="query">
        <div class="clearInput" @click="clearInput">X</div>
        <div class="searchHistory" v-show="showHistory">
            <div class="head">
                <span>搜索历史</span>
                <span @click="clearHistory">清空<van-icon name="delete" size='18'/></span>
            </div>
            <div class="history">
                <span 
                    v-for="(i,j) in historyList" 
                    :key='j'
                    @click="Clickquery(i)">
                        {{i}}
                </span>
            </div>
        </div>
        <div class="hotSearch" v-show="hotIsShow">
            <div class="head">热门搜索</div>
            <van-grid :column-num="2" :border="false" >
                 <van-grid-item 
                    v-for="(i,j) in hotSearchList" 
                    :key='j' 
                    :text="i"
                    @click="Clickquery(i)"/>   
            </van-grid>
        </div>
        <div 
            class="searchResult"
            v-for="(i,j) in searchResultList"
            :key="j"
            v-show="!hotIsShow"
            @click="goBookDetails(i.id)">
            <img :src="i.cover" alt="">
            <div class="content">
                <h4>{{i.title}}</h4>
                <span>{{i.latelyFollower}}人在追</span>
                <span>{{i.retentionRatio}}%读者留存</span>
                <span>{{i.author}}</span>
            </div>
        </div>
    </div>
</template>
<script>
import Header from '@/components/Header.vue'
export default {
    name:'Search',
    components:{
        Header,
    },
    data(){
        return {
            // head
            title:'',
            type:4,
            hotSearchList:[
                "斗罗大陆","斗罗大陆之七怪成神之路",
                "修真者在火影","斗罗大陆之元素圣灵",
                "火影系统横行异界","重生后她宅斗技能满点了",
                "快穿：男配，别作死","最强升级系统",
                "奥特曼之迪加战神","斗破苍穹"
            ],
            hotIsShow:true,
            query:'',
            searchResultList:[],
            historyList:[],
            showHistory:false,
        }
    },
    created(){
         this.$api.Preflight().then(res=>{
            // this.HotSearch()
        }).catch((()=>{
            console.log('请求出错')
        }))
    },
    watch:{
        query(v){
            if(v==''){
                this.hotIsShow=true
                this.searchResultList=[]
                if(this.historyList[0]!=undefined){
                    this.showHistory=true
                }
            }
        }
    },
    mounted(){
        let a=localStorage.getItem('historyList')
        if(a!=null){
            this.historyList=JSON.parse(a)
            this.showHistory=true
        }
    },
    methods:{
        // 获取热门搜索
        HotSearch(){
            this.$api.getKey().then(res=>{
                this.hotSearchList=res.data
            }).catch()
        },
        // 历史记录
        history(){
            console.log(this.historyList.indexOf(this.query))
            let index=this.historyList.indexOf(this.query)
            if(index!=-1){
                this.historyList.splice(index,1)
            }
            this.historyList.unshift(this.query)
            localStorage.setItem('historyList',JSON.stringify(this.historyList))
            this.hotIsShow=false
            this.showHistory=false
        },
        // 验证
        Check(){
            this.$api.Preflight().then(res=>{
                if(res.errorno==200){
                    this.GetSearch()
                }
            }).catch((()=>{
                console.log('请求出错')
            }))
        },
        // 获得搜索结果
        GetSearch(){
            this.history()
            let params={
                key:this.query,
                page:1
            }
            this.$api.getSearch(params).then(res=>{
                this.searchResultList=res.data
            }).catch((()=>{
                console.log('请求出错')
            }))
            // console.log(this.historyList)
        },
        clearHistory(){
            this.showHistory=false
            this.historyList=[]
            localStorage.removeItem('historyList')
        },
        clearInput(){
            this.query=''
        },
        goBookDetails(v){
            this.$router.push({
                name:'BookDetails',
                params:{
                    id:v
                }
            })
        },
        // 热门搜索与历史纪录
        Clickquery(v){
            this.query=v
            this.Check()
        },
        
    }
}
</script>
<style lang="stylus" scoped>
input
  width 70vw
  height .6rem
  z-index 1
  border-radius 10px
  border none
  position fixed
  top .2rem
  left 0
  right 0
  margin auto
  padding-left .2rem
  font-size .28rem
.head
  font-size .34rem
  padding .2rem
.van-grid-item
  padding-left .2rem
  >>> .van-grid-item__content 
    background-color transparent
    align-items flex-start
  >>> .van-grid-item__text
    font-size .28rem
.searchResult
  background-color #fff
  display flex
  width 100vw
  height 2rem
  padding .1rem 0
  img
    width 20%
    padding 0 .2rem 
  .content
    width 70%
    height 100%
    border-bottom 1px solid #ccc
    display flex
    flex-wrap wrap
    align-content space-around
    h4
      font-size .28rem
      width 100%
      height .84rem
      line-height .84rem
    span
      font-size .24rem
      color #999
      padding 0 .3rem .3rem 0
      position relative
      &:after
        position absolute
        content ''
        width .02rem
        height .24rem
        background-color #ccc
        right 0.1rem
        top 0.05rem
      &:last-child
        &:after
          width 0
.searchHistory
  .head
    display flex
    justify-content space-between
    .van-icon
      vertical-align bottom
      margin 0 .1rem
    span:last-child
        font-size .28rem
  .history
    display flex
    flex-wrap wrap
    padding .1rem
    height 1.7rem
    overflow hidden
    span
      background-color rgba(0,0,0,.1)
      font-size .28rem
      height .56rem
      line-height .56rem
      border-radius .5rem
      padding .05rem .2rem
      margin .1rem
.clearInput
  position absolute
  z-index 1
  color #ccc
  font-size .28rem
  top 0.3rem
  right 1.2rem


</style>